import { List, Typography } from "antd";
import React from "react";
import type { BidRecord, BidRecordListProps, DisplayItem } from "./schema";
import BidActionButtons from "./BidActionButtons";

function transformToDisplayItems(bids: BidRecord[]): DisplayItem[] {
  const items: DisplayItem[] = [];
  bids.forEach((bid) => {
    items.push({ id: bid.id, name: bid.name, type: "BID", sourceId: bid.id });
    if (bid.has_bargaining) {
      items.push({
        id: `${bid.id}-bargain`,
        name: `${bid.name}(议价)`,
        type: "BARGAIN",
        sourceId: bid.id,
      });
    }
  });
  return items;
}

const BidRecordList: React.FC<BidRecordListProps> = ({
  bidRecords,
  onUploading,
}) => {
  const displayItems: DisplayItem[] = transformToDisplayItems(bidRecords);
  return (
    <div
      style={{
        flex: 1,
        overflowY: "auto",
        minHeight: 0,
        marginBottom: "16px",
        padding: "4px",
        contain: "layout style paint"
      }}
    >
      <Typography.Title
        level={4}
        style={{
          margin: "8px 0",
          position: "sticky",
          top: 0,
          background: "#fff",
          zIndex: 2,
          padding: "4px 8px",
          borderBottom: "1px solid #e8e8e8",
        }}
      >
        投标记录
      </Typography.Title>
      <List
        itemLayout="vertical"
        locale={{ emptyText: "暂无投标记录" }}
        dataSource={displayItems}
        renderItem={(item) => (
          <List.Item
            actions={[
              <BidActionButtons
                bidRecord={item}
                onUploading={(isUploading: boolean): void => {
                  if (onUploading) {
                    onUploading(isUploading);
                  } else {
                    console.log("No onUploading callback provided");
                  }
                }}
              />,
            ]}
            style={{ padding: "12px", borderBottom: "1px solid #f0f0f0" }}
          >
            <Typography.Text
              ellipsis
              style={{ maxWidth: "calc(100% - 32px)" }}
              strong
            >
              {item.name}
            </Typography.Text>
          </List.Item>
        )}
      />
    </div>
  );
};

export default BidRecordList;
